{layout name="layout2" /}
<link rel="stylesheet" href="/static/admin/css/goods.css?v=12345" media="all">
<!--<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">-->

<!--<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>-->
<script src="/static/common/js/cities.js?v=12345"></script>
<script src="/static/common/js/zhCn.js?v=12345"></script>
<!-- Import style -->
    <!-- <link rel="stylesheet" href="/static/common/frame/element-plus/index.css" /> -->
  <!-- Import component library -->
  <!-- <script src="/static/common/frame/element-plus/index.full.js"></script> -->
  <!-- 引入 css -->
<link href="/static/common/frame/wang-editor/style.css" rel="stylesheet">

<!-- 引入 js -->
<script src="/static/common/frame/wang-editor/index.js"></script>
<style>
video{
    width:100%;
}
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #editor-box{
      display:flex;
      justify-content:center;
      padding: 40px;
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { 
      box-shadow:0 0 5px rgba(0,0,0,0.5);
      width:375px;
      height: 500px; 
      
  }
</style>
<div id="vue_add" class="layui-tab layui-tab-card">
    <!--<ul class="layui-tab-title" style="background-color: #f3f5f9">-->
    <!--    <li class="goods-tab layui-this" style="color: #6a6f6c">基础设置</li>-->
    <!--    <li class="goods-tab" style="color: #6a6f6c">场次价格</li>-->
    <!--    <li class="goods-tab" style="color: #6a6f6c">活动详情</li>-->
    <!--    <li class="goods-tab" style="color: #6a6f6c">销售设置</li>-->
    <!--    <li class="goods-tab" style="color: #6a6f6c">分销设置</li>-->
    <!--</ul>-->
    <div class="layui-tab-content layui-form">
        <fieldset class="layui-elem-field ">
            <legend>基础设置</legend>
        <div class="layui-tab-item goods-content layui-show">
            <div class="layui-card-body" pad15>
                <div lay-filter="">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>活动名称：</label>
                        <div class="layui-input-block">
                            <input name="goods_id" type="hidden">
                            <input type="text" name="name" lay-verify="custom_required" lay-verType="tips"
                                   autocomplete="off"
                                   switch-tab="0" verify-msg="请输入活动名称，最多64个字符" placeholder="请输入活动名称，最多64个字符"
                                   class="layui-input" v-model="addForm.name">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>报名截止时间：</label>
                        <input type="hidden" name="deadline_time" v-model="addForm.deadline_time">
                        <el-date-picker
                            v-model="addForm.deadline_time"
                            type="datetime"
                            placeholder="请选择截止时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            date-format="MMM DD, YYYY"
                            time-format="HH:mm"
                            value-format="X"
                        ></el-date-picker>
                          
 
                    </div>
                    <div class="layui-form-item layui-hide" >
                        <label class="layui-form-label">活动编码：</label>
                        <div class="layui-input-block">
                            <input type="text" name="code" lay-verType="tips" autocomplete="off" switch-tab="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>活动分类：</label>
                        <div class="layui-input-inline">
                            <select name="first_category_id" lay-filter="first_category" lay-verify="custom_required"
                                    lay-verType="tips" switch-tab="0" verify-msg="请选择大类">
                                <option value="">请选择大类</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="second_category_id" lay-filter="second_category" lay-verify="custom_required"
                                    lay-verType="tips" switch-tab="0" verify-msg="请选择分类">
                                <option value="">请选择活动类型</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="third_category_id" lay-filter="third_category" lay-verify="custom_required"
                                    lay-verType="tips" switch-tab="0" verify-msg="请选择默认">
                                <option value="">选择默认即可</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>发布到智库：</label>
                        
                        <div  style="display:flex;width:70%">
                            <span style="padding:9px 12px;">注意事项：活动大分类选择智库，如果想将该课程推荐到首页请勾选</span>
                            
                            <input type="checkbox" name="is_zhiku" lay-skin="primary" title="智库推荐">
                        </div>
                    </div>
                    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label">活动卖点：</label>
                        <div class="layui-input-block">
                            <input type="text" maxlength="32" name="remark" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>活动区域：</label>
                        <el-form-item  >
                          <el-cascader
                            
                            v-model="city_code"
                            hover
                            placeholder="请选择活动区域"
                            :options="cities"
                            :props="props"
                            @change="onCitisSelectChange"
                          />
                        </el-form-item>
                        <!-- 隐藏域用于同步Element Plus组件的值到Layui表单 -->  
                        <input type="hidden" name="city_code" v-model="city_code">
                        <input type="hidden" name="city_name" v-model="city_name">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>详细地址：</label>
                        <div class="layui-input-inline">
                            <input type="text" maxlength="99" lay-verType="tips" lay-verify="address" switch-tab="0" verify-msg="请填写详细地址" name="address" autocomplete="off" class="layui-input" v-model="addForm.address">
                            <!--        <select name="address" lay-verType="tips" lay-verify="address" switch-tab="0" verify-msg="请选择活动地址" v-model="addForm.address">-->
                            <!--    <option value="" >请选择活动地址</option>-->
                            <!--    <option :value="item.value" v-for="item in addressOptions">{{item.value}}</option>-->
                            <!--</select>-->
                        </div>
                    </div>
                    
                    <div class="layui-form-item" style="margin-bottom: 0px">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>活动主图：</label>
                        <div style="height:80px;line-height:80px">
                            <div class="master-image" >
                                <!--<input name="image" type="hidden" v-model="addForm.image">-->
                                <!--<img class="goods-img" :src="addForm.abs_image">-->
                                <!--<a class="goods-img-del-x goods-image-del">x</a>-->
                            </div>
                            <div class="goods-img-add goods-image" lay-verify="image" lay-verType="tips" switch-tab="0" verify-msg="选择图片"></div>
                        </div>
                    </div>

                    <div class="layui-form-item" style="margin-bottom: 0px">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>活动轮播图：</label>
                        <div class="" style="height:80px;line-height:80px">
                            <ul>
                            </ul>
                            <div class="goods-img-add" lay-verify="goods_image" lay-verType="tips" switch-tab="0"
                                 verify-msg="至少选择一张图片"></div>
                            <br>
                            <br>
                        </div>
                    </div>
                    <div class="layui-form-item"><label class="layui-form-label"></label><span
                            style="color: #a3a3a3;font-size: 9px">建议尺寸：800*800像素，你可以拖拽图片调整顺序，最多上传8张</span></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动视频：</label>
                        <div class="upload-file-div video-style" id="video">
                            <a href="#" class="upload-file-title">+添加视频</a>
                        </div>
                    </div>
                    <div class="layui-form-item"><label class="layui-form-label"></label><span
                            style="color: #a3a3a3;font-size: 9px">手机端播放，建议时长9-30秒，建议视频宽高比16:9</span></div>

                    <div class="layui-form-item" style="margin-bottom: 0px">
                        <label class="layui-form-label">自定义分享海报：</label>
                        <div style="height:80px;line-height:80px">
                            <div class="poster-image" ></div>
                            <div class="goods-img-add poster-upload" lay-verify="image" lay-verType="tips" switch-tab="0" verify-msg="选择图片"></div>
                        </div>
                    </div>
                    <div class="layui-form-item"><label class="layui-form-label"></label><span
                            style="color: #a3a3a3;font-size: 9px">自定义活动分享的海报图，留空则默认使用活动封面图，建议尺寸：800*800像素</span></div>

                    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label">活动品牌：</label>
                        <div class="layui-input-inline">
                            <select name="brand_id" lay-verType="tips" switch-tab="0" verify-msg="请选择活动品牌">
                                <option value="">请选择品牌</option>

                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label">供货商：</label>
                        <div class="layui-input-inline">
                            <select name="supplier_id" lay-verType="tips" switch-tab="0" verify-msg="请选择供货商">
                                <option value="">请选择供货商</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </fieldset>
        <fieldset class="layui-elem-field" style="padding:20px;">
            <legend>场次价格</legend>
            <div class="layui-collapse" >
              <div class="layui-colla-item" v-for="(item1,i) in specOrigin">
                <h2 class="layui-colla-title" style="display:flex;justify-content:space-between;align-items:center;">
                    <div>第{{['一','二','三','四','五'][i]}}场————共{{item1.spec_val.length}}种票</div>
                    <button  type="button" class="layui-btn layui-btn-danger layui-btn-sm" @click="delFatherSpec(i)">删除场次</button>
                </h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>场次名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="spec_name[]"  lay-verify="more_spec_required" lay-verType="tips" switch-tab="1"
                       verify-msg="场次不能为空"
                       placeholder="请填写场次名称" autocomplete="off" class="layui-input spec_name" v-model="item1.name">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>场次时间：</label>
                        <input type="hidden" name="start_end_time[]" v-model="item1.start_end_time">
                        
                        <el-date-picker
                            v-model="item1.start_end_time"
                            type="datetimerange"
                            start-placeholder="请选择活动开始时间"
                            end-placeholder="请选择活动结束时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            date-format="YYYY/MM/DD ddd"
                            
                            value-format="X"
                         >
                         </el-date-picker>
                     <table id="more-spec-lists" class="layui-table spec-lists-table" lay-size="sm">
                        <colgroup>
                            <col width="60px">
                        </colgroup>
                        <thead>
                            <tr style="background-color: #f3f5f9">
                                <th style="width:20%;">票种名称</th>
                                <th style="width:20%;">市场价(元)</th>
                                <th style="width:20%;"><span class="form-label-asterisk">*</span>票价(元)</th>
                                <th style="width:20%;"><span class="form-label-asterisk">*</span>席位</th>
                                <th style="width:20%;">限购</th>
                                <th >操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in item1.spec_val" >
                                <input name="spec_image[]" type="hidden" v-model="item.spec_image">
                                <td><input type="text" class="layui-input" lay-verify="more_spec_required|more_market_price" lay-verType="tips"
                               autocomplete="off"  verify-msg="请输入票名" name="spec_value_str[]" v-model="item.spec_value_str">
                                <input type="hidden" name="item_id[]" v-model="item.id">
                                <input type="hidden" name="cost_price[]" v-model="item.market_price">
                               </td>
                                <td><input type="number" class="layui-input" lay-verify="more_spec_required|more_market_price" lay-verType="tips"
                               autocomplete="off"  verify-msg="请输入市场价" name="market_price[]" v-model="item.market_price"></td>
                                <td><input type="number" class="layui-input" lay-verify="more_spec_required|more_price" lay-verType="tips"
                               autocomplete="off"  verify-msg="请输入票价" name="price[]" v-model="item.price"></td>
                                
                               <td><input type="number" class="layui-input" lay-verify="more_spec_required|more_stock" lay-verType="tips"
                               autocomplete="off"  verify-msg="请输入席位" name="stock[]" v-model="item.stock"></td>
                               <td><input type="number" class="layui-input" lay-verify="more_spec_required|more_stock" lay-verType="tips"
                               autocomplete="off"  verify-msg="请输入限购" name="quota[]" v-model="item.quota"></td>
                               <td >
                                    <button class="layui-btn layui-btn-danger layui-btn-sm self-del-btn" @click="delSpec(i,index)">删除</button>
                               </td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="text-align:center;">
                        <button  type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="addSpec(i)">添加票种</button>
                    </div>
                    
                </div>
              </div>
            </div>
            
            <input type="hidden" class="spec_values" name="spec_values[]" v-model="item" v-for="item in spec_values">
            <input type="hidden" class="spec_value_ids" name="spec_value_ids[]"  v-model="item" v-for="item in spec_value_ids">
            <input class="layui-hide" type="hidden" name="spec_type" lay-filter="spec-type" value="2" title="多规格" checked>
            <input type="hidden" name="spec_id[]" v-model="item" v-for="item in spec_id">
            <input type="hidden" name="start_time[]" v-model="item" v-for="item in start_time">
            <input type="hidden" name="end_time[]" v-model="item" v-for="item in end_time">
            <div style="text-align:center;margin-top:20px;">
                            <button type="button" class="layui-btn layui-btn-normal" @click="addFatherSpec">添加场次</button>
            </div>
        </fieldset>
        <!--<div class="editor-img-add goods-img-add layui-btn layui-btn-normal"> 唤起添加图片</div>-->
        <fieldset class="layui-elem-field ">
            <legend>活动详情</legend>
            <!--<div class="layui-form-item layui-hide">-->
            <!--        <div class="layui-input-block">-->
            <!--            <textarea name="content" id="content" lay-verify="content" ></textarea>-->
            <!--        </div>-->
            <!--</div>-->

            <div class="goods-img-add-hide layui-hide"></div>
        <textarea id="content" name="content" id="content" lay-verify="content"  class="field-content layui-hide"></textarea>
        <div class="layui-input-block">
            <div id="editor—wrapper">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-box">
                    <div id="editor-container" ><!-- 编辑器 --></div>
                </div>
                
            </div>
        </div>
        </fieldset>
        <fieldset class="layui-elem-field ">
            <legend>销售设置</legend>
           
                <div class="layui-form-item">
                    <label class="layui-form-label">虚拟销量：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="virtual_sales_sum" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存预警：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="stock_warn" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item"><label class="layui-form-label"></label><span
                        style="color: #a3a3a3;font-size: 9px">设置最低库存预警值，当库存低于预警值时会出现在库存预警活动列表页，0为不预警。</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存显示：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_show_stock" value="1" title="显示" checked>
                        <input type="radio" name="is_show_stock" value="0" title="不显示" >
                    </div>
                </div>
                <input type="hidden" name="free_shipping_type" value="1" title="包邮" checked>
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">快递运费：</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="free_shipping_type" value="1" title="包邮" checked>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                            <input type="radio" name="free_shipping_type" value="2" title="统一运费">
                        </div>
                        <div class="layui-input-inline" style="width: 110px">
                            <input type="number" name="free_shipping" class="layui-input">
                        </div>
                        <div class="unit-tips">元</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                            <input type="radio" name="free_shipping_type" value="3" title="运费模板">
                        </div>
                        <div class="layui-input-inline" style="width: 110px">
                            <select name="free_shipping_template_id">
                                <option value=""></option>
    
                            </select>
                        </div>
    
                    </div>
                </div>
                <!--积分抵扣-start-->
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">积分抵扣：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_integral" value="1" title="允许积分抵扣" >
                        <input type="radio" name="is_integral" value="0" title="不能使用积分抵扣" checked>
                    </div>
                </div>
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label"></label>
                    <span style="color: #a3a3a3;font-size: 9px">默认不参与积分抵扣</span>
                </div>
                <!--积分抵扣-end-->
                <!--赠送积分-start-->
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">赠送积分：</label>
                    <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                        <input type="radio" name="give_integral_type" value="1" title="赠送固定积分">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text"  name="give_integral_num" class="layui-input time" autocomplete="off">
                    </div>
                    <div class="unit-tips">积分</div>
                </div>
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                        <input type="radio" name="give_integral_type" value="2" title="按比例赠送积分">
                    </div>
                    <div class="layui-input-inline" style="width:auto">
                        <input type="number" min="0" name="give_integral_ratio" class="layui-input">
                    </div>
                    <div class="unit-tips">%</div>
                </div>
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label"></label>
                    <span style="color: #a3a3a3;font-size: 9px">按活动金额的比例赠送积分</span>
                </div>
                <!--赠送积分-end-->
                <!--会员价-start-->
                <div class="layui-form-item">
                    <label class="layui-form-label">会员价：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_member" value="0" title="不参与会员价" checked>
                        <input type="radio" name="is_member" value="1" title="根据会员等级折扣计算会员价" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <span style="color: #a3a3a3;font-size: 9px">根据会员等级设置的会员折扣自动打折，拼团和秒杀等营销活动不参与会员折扣</span>
                </div>
                <!--会员价-end-->
                <div class="layui-form-item">
                    <label class="layui-form-label">活动标签：</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="is_new" lay-skin="primary" title="推荐活动">
                        <!--<input type="checkbox" name="is_best" lay-skin="primary" title="好物优选">-->
                        <!--<input type="checkbox" name="is_like" lay-skin="primary" title="猜你喜欢">-->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="form-label-asterisk">*</span>销售状态：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="立即上架" verify-msg="选择销售状态" lay-verify="status" >
                        <input type="radio" name="status" value="0" title="放入仓库" verify-msg="选择销售状态" lay-verify="status" checked>
                    </div>
                </div>
            
        </fieldset>
        <fieldset class="layui-elem-field ">
            <legend>分销设置</legend>
       
            <div class="layui-form-item">
                <label class="layui-form-label">分销佣金：</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_commission" value="1" title="开启" checked>
                    <input type="radio" name="is_commission" value="0" title="不开启" >
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label"></label><span
                    style="color: #a3a3a3;font-size: 9px">开启后活动可以参与分销佣金</span></div>
            <div class="layui-form-item">
                <label class="layui-form-label">一级分销比例：</label>
                <div class="layui-input-inline">
                    <input type="text" name="first_ratio"  autocomplete="off" class="layui-input first_ratio">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">二级分销比例：</label>
                <div class="layui-input-inline">
                    <input type="text" name="second_ratio" autocomplete="off" class="layui-input second_ratio">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">三级分销比例：</label>
                <div class="layui-input-inline">
                    <input type="text" name="three_ratio"  lay-verify="distribution" autocomplete="off" class="layui-input three_ratio">
                </div>
            </div>
        
        </fieldset>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="goods-submit" id="goods-submit" value="确认">
        </div>
 
    </div>
</div>

<!---------------------------------html模板---------------------------------->
<script type="text/html" id="template-goods-image">
    <li class="goods-li">
        <input name="goods_image[]" type="hidden" value="{image-src}">
        <img class="goods-img goods_image" src="{image-src}">
        <a class="goods-img-del-x" style="display: none;">x</a></li>
</script>

<script type="text/javascript">
const { createApp } = Vue;
let hasData = false
var pageData = {$info|raw|default='hasData'};
console.log('pageData------',pageData)
createApp({
    data() {
      return {
        addForm:{
            "name":"",
            "code":"",
            "first_category_id":"",
            "second_category_id":"",
            "third_category_id":"",
            "image":"",
            "abs_image":"",
            "swiper_images":[],
            "video":"",
            "poster":"",
            "remark":"",
            "content":"",
            "address":"",
            "start_time":"",
            "end_time":"",
            "start_time_day":"",
            "end_time_day":"",
            "deadline":"",
            "spec_values[]":"",
            "spec_value_ids[]":"",
            "deadline_time":""
        },
        spec_values:[],
        spec_value_ids:[],
        spec_id:[],
        spec_name:[],
        start_time:[],
        end_time:[],
        addressOptions:[
            {
                "id":1,
                "value":"芳佳茗品（北京西城）"
            },
            {
                "id":2,
                "value":"天择优选（天津市西青区）"
            }
        ],
        specList:[
            {
                bindKey:Math.random(),
                spec_name:"默认",
                spec_value_str:"默认",
                market_price:0,
                price:0,
                cost_price:0,
                stock:999
            }
        ],
        helpSpecList:{},
        specOrigin:[],
        cities:cities,
        city_code:[],
        city_name:'',
        props: {
          expandTrigger: 'hover',
          value: 'code',
          label: 'name',
          children: 'children'
        }
      }
    },
    watch: {
        // city_code:{
        //     handler(newValue, oldValue) {
        //         let a = cities.
        //         this.city_name = cities.
        //     }
        // },
        specOrigin: {
          handler(newValue, oldValue) {
            // 注意：在嵌套的变更中，
            // 只要没有替换对象本身，
            // 那么这里的 `newValue` 和 `oldValue` 相同
            // this.addForm["spec_value_ids[]"] = newValue.map(x=>x.spec_value_ids).join(',')
            //console.log('newValue',newValue)
            this.spec_value_ids = newValue.map(x=>{
                return x.spec_val.map(y=>y.spec_value_ids).join(',')
            })
            // this.addForm["spec_values[]"] = newValue.map(x=>x.spec_value_str).join(',')
            this.spec_values = newValue.map(x=>{
                return x.spec_val.map(y=>y.spec_value_str).join(',')
            })
            this.spec_name = newValue.map(x=>x.name)
            this.spec_id = newValue.map(x=>x.id)
            this.start_time = newValue.map(x=>{
                let start_end_time =  x.start_end_time
                if(start_end_time && start_end_time.length){
                    return start_end_time[0]
                }
                return '' 
            })
            this.end_time = newValue.map(x=>{
                let start_end_time =  x.start_end_time
                if(start_end_time && start_end_time.length){
                    return start_end_time[1]
                }
                return '' 
            })
          },
          deep: true
        }
    },
    methods:{
        onCitisSelectChange(e){
            console.log(e)
            let v = ''
            this.cities.forEach(x=>{
                if(x.code == e[0]){
                    v+=x.name
                    x.children.forEach(y=>{
                        if(y.code == e[1]){
                            v+=y.name
                            y.children.forEach(z=>{
                                if(z.code == e[2]){
                                    v+=z.name
                                    this.city_name = v
                                }
                            })
                        }
                    
                })
                }
                
            })
        },
      initialForm(){
          if(!pageData){
              return
          }
          this.addForm.name = pageData.base.name
          this.addForm.image = pageData.base.image
          this.addForm.abs_image = pageData.base.abs_image
          this.addForm.address = pageData.base.address
          this.city_code = pageData.base.city_code && pageData.base.city_code.split(',')
          this.addForm.deadline_time = pageData.base.deadline_time
          
          this.spec_id = pageData.spec.map(x=>x.id)
          this.spec_name = pageData.spec.map(x=>x.name)
        //   this.specList = pageData.item.map(x=>{
        //       return {
        //           bindKey:Math.random(),
        //           ...x
        //       }
        //   })
          this.helpSpecList = {}
          pageData.item.forEach(x=>{
              this.helpSpecList[x.spec_value_ids] = x
          })
          let sList = pageData.spec.map(x=>{
              return {
                  ...x,
                  
                  spec_val:x.values.map(y=>this.helpSpecList[y.id])
              }
          })
          sList = sList.map(x=>{
              let spec_val_f = x.spec_val.filter(y=>y)
              if(!spec_val_f.length){
                  return undefined
              }
              return {
                  ...x,
                  start_end_time:[x.start_time,x.end_time],
                  spec_val:spec_val_f
              }
          }).filter(x=>x)
          
          this.specOrigin = sList
      },
      addSpec(i){
          this.specOrigin[i].spec_val.push({
            id:0,
            bindKey:Math.random(),
            spec_name:"",
            spec_value_str:"",
            spec_value_ids:"0",
            market_price:0,
            price:0,
            cost_price:0,
            stock:999
          })
      },
      delFatherSpec(i){
        this.specOrigin.splice(i,1)  
      },
      addFatherSpec(){
        this.specOrigin.push({
            id:'',
            start_end_time:'',
            start_time:'',
            end_time:'',
            spec_val:[
                {
                    id:0,
                    bindKey:Math.random(),
                    spec_name:"",
                    spec_value_str:"",
                    spec_value_ids:"0",
                    market_price:0,
                    price:0,
                    cost_price:0,
                    stock:999
                }
            ],
            name:""
        })
        // this.spec_id.push('')
        // this.spec_name.push('')
      },
      delSpec(i,index){
          
          this.specOrigin[i].spec_val.splice(index,1)
          
      }
    },
    created(){
        this.initialForm()
        // window.vueData = this
        // this.addForm.name = '测试活动请勿购买！！！'
        // console.log(666)
    }
}).use(ElementPlus,{size:'large',zIndex:1000,locale: zhCn}).mount('#vue_add')

</script>
// <script>
// const { createEditor, createToolbar } = window.wangEditor

// const editorConfig = {
//     placeholder: '请输入内容...',
//     onChange(editor) {
//       const html = editor.getHtml()
//       console.log('editor content', html)
//       // 也可以同步到 <textarea>
//     }
// }

// const editor = createEditor({
//     selector: '#editor-container',
//     html: '<p><br></p>',
//     config: editorConfig,
//     mode: 'default', // or 'simple'
// })

// const toolbarConfig = {}

// const toolbar = createToolbar({
//     editor,
//     selector: '#toolbar-container',
//     config: toolbarConfig,
//     mode: 'default', // or 'simple'
// })
// </script>
<script type="text/javascript">
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    var dragstart = 0;
    var swop_element_ed = -1;
    var create_table_by_spec = null;
    var spec_table_data = [];
    var spec_value_temp_id_number = 0;

    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'jquery', 'like', 'likeedit','laydate'], function () {
        var $ = layui.$;
        var like = layui.like;
        var form = layui.form;
        var likeedit = layui.likeedit;
        var laydate = layui.laydate;
        
        
        $('.first_ratio').bind('input propertychange', function() {
            var that = $(this);
            var value = that.val();
            format(that,value)

        });
        $('.second_ratio').bind('input propertychange', function() {
            var that = $(this);
            var value = that.val();
            format(that,value)

        });
        $('.three_ratio').bind('input propertychange', function() {
            var that = $(this);
            var value = that.val();
            format(that,value)

        });
        //格式化分销比例
        function format(that,value){
            value = value.replace(/[^0-9.]/g,'');

            value = value.replace(/\.{2,}/g,".");
            value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");

            value = value.replace(/^(\-)*(\d+)\.(\d)(\d).*$/,'$1$2.$3$4');
            if(value.indexOf(".")< 0 && value !=""){
                value= parseFloat(value);
            }
            if(value > 100){
                that.val(100);
                return false;
            }
            that.val(value);
        }

        
        //------------------------基本信息----------------------------------
        //活动主图事件
        $(document).on('mouseenter', '.goods-li', function () {
            $(this).children().last().show();
        });
        $(document).on('mouseleave', '.goods-li', function () {
            $(this).children().last().hide();
        });
        $(document).on('click', '.goods-li', function () {
            var src = $(this).children('img').attr('src');
            like.showImg(src,600);
        });
        //主图显示删除按钮
        $(document).on('mouseenter','.master-image',function () {
            $(this).children('.goods-image-del').show();
        })
        $(document).on('mouseleave', '.master-image', function () {
            $(this).children('.goods-image-del').hide();
        });
        $(document).on('click', '.master-image', function () {
            var src = $(this).children('img').attr('src');
            like.showImg(src,600);
        });

        //分享海报删除按钮
        $(document).on('mouseenter','.poster-image',function () {

            $(this).children('.goods-image-del').show();
        })
        $(document).on('mouseleave', '.poster-image', function () {
            $(this).children('.goods-image-del').hide();
        });
        $(document).on('click', '.poster-image', function () {
            var src = $(this).children('img').attr('src');
            like.showImg(src,600);
        });

        $(document).on('click', '.goods-img-del-x', function () {

            if($(this).hasClass('goods-image-del')){
                $(this).parent().next().show();
                $(this).parent().children().remove();
            }

            $(this).parent().remove();
            return false;
        });
        
        let useWang = false
        $(document).ready(function() {  
            $('button[data-menu-key="myMenu"]').on('click', function(e) {  
                // 这里编写点击事件的处理逻辑  
                useWang = true
                e.preventDefault()
                console.log('我被点击了')
                $('.upload-image-a:first').trigger('click');
                
                });  
        });

        like.imageUpload('.goods-img-add', function (uris, element) {
            if(element.hasClass('editor-img-add')){
                if(uris.length>1){
                    layer.msg('最多最能选中1张图片');
                    return;
                }
                console.log('已选中图片',uris)
                return 0;
            }
            if(useWang){
                if(uris.length>1){
                    layer.msg('最多最能选中1张图片');
                    return;
                }
                console.log(uris)
                editor.restoreSelection() // 恢复选区
        //   editor.insertText(text)
        //   editor.insertText(' ')
          const node = { type: 'image',src: uris[0], children: [{ text: '' }] }
            editor.insertNode(node)
                return useWang = false
            }
            if(element.hasClass('goods-image')){
                if(uris.length>1){
                    layer.msg('最多最能选中1张图片');
                    return;
                }
                var html = '' +
                    '<input name="image" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '">' +
                    '  <img class="goods-img" src="' + uris[0] + '">\n' +
                    '<a class="goods-img-del-x goods-image-del">x</a>';
                element.prev().append(html);
                element.css('display','none');;
                return 0;
            }
            if(element.hasClass('poster-upload')){
                if(uris.length>1){
                    layer.msg('最多最能选中1张图片');
                    return;
                }
                var html = '' +
                    '<input name="poster" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '">' +
                    '  <img class="goods-img" src="' + uris[0] + '">\n' +
                    '<a class="goods-img-del-x goods-image-del">x</a>';
                element.prev().append(html);
                element.css('display','none');;
                return 0;
            }
            var count = element.prev().children().length;

            count = !count ? 0:count;
            if (count+uris.length > 8) {
                layer.msg('最多最能选中8张图片');
                return;
            }
            uris = uris.reverse();
            for(var i in uris){
                var uri = uris[i];
                var template_goods_image = $('#template-goods-image').html();
                element.prev().append(template_goods_image.replace('{image-src}', like.getUrlFileName(uri, '{$storageUrl}')).replace('{image-src}', uri));
            }
        }, true);

        // ========= 视频上传 开始
        $('#video').click(function(){
            layer.open({
                type: 2,
                title: '上传视频',
                content: '{:url("file_new/lists")}?type=video',
                area: ['90%', '90%']
            });
        });

        window.videoCallback = function(uris) {
            like.videoCallback(uris);
        };
        // ========== 视频上传 结束

        //图片拉拽
        $(document).on('dragstart', '.goods-li', function (e) {
            dragstart = e.offsetX;
        });
        $(document).on('dragend', '.goods-li', function (e) {
            swop_element_ed = -1;
        });
        $(document).on('mousedown', '.goods-li', function (e) {
            swop_element_ed = -1;
        });
        $(document).on('dragover', '.goods-li', function (e) {
            e.preventDefault();
            swop_element = parseInt((e.clientX - dragstart) / 100) - 1;
            swop_element = swop_element <= 0 ? 0 : swop_element;
            my_element = $(this).prevAll().length;
            if (swop_element == my_element) {
                return;
            }
            if (swop_element == swop_element_ed) {
                return;
            }
            swop_element_ed = swop_element;
            swop($(this), $(this).parent().children().eq(swop_element));
        });

        //渲染品牌
        var brands = {$brand_lists | raw};

        setBrand();
        function setBrand(default_id) {
            var brand_select_html = '<option value="">请选择品牌</option>';
            for (var i in brands) {
                brand_select_html += '<option value="' + brands[i]['id'] + '">' + brands[i]['name'] + '</option>';
            }
            $('select[name="brand_id"]').html(brand_select_html);
            $('select[name="brand_id"]').val(default_id);
            form.render('select');
        }
        
        
        //渲染供应商
        var supplier = {$supplier_lists | raw};
        setSupplier();
        function setSupplier(default_id) {
            var supplier_select_html = '<option value="">请选择供应商</option>';
            for (var i in supplier) {
                supplier_select_html += '<option value="' + supplier[i]['id'] + '">' + supplier[i]['name'] + '</option>';
            }
            $('select[name="supplier_id"]').html(supplier_select_html);
            $('select[name="supplier_id"]').val(default_id);
            form.render('select');
        }
        //渲染运费模板
        var freight_template = {$freight_lists | raw};
        setFreightTemplate();
        function setFreightTemplate(default_id) {
            var template_select_html = '<option value="">请选择运费模板</option>';
            for (var i in freight_template) {
                template_select_html += '<option value="' + freight_template[i]['id'] + '">' + freight_template[i]['name'] + '</option>';
            }
            $('select[name="free_shipping_template_id"]').html(template_select_html);
            $('select[name="free_shipping_template_id"]').val(default_id);
            form.render('select');
        }


        
        //分类联动
        var categorys = {$category_lists | raw};
        let o_categorys = categorys
        
        //切换是否智库
        

        setSelectFirst();


        function setSelectFirst(default_id) {
            var category_select_html = '<option value="">请选择分类</option>';
            for (var i in categorys) {
                if (categorys[i]['pid'] == 0) {
                    category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
                }
            }
            $('select[name="first_category_id"]').html(category_select_html);
            $('select[name="first_category_id"]').val(default_id);
            form.render('select');
        }
        function setSelectSecond(default_id, pid) {
            pid = pid === undefined ? $('select[name="first_category_id"]').val() : pid;
            $('select[name="second_category_id"]').html('<option value="">请选择分类</option>');
            $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
            var category_select_html = '<option value="">请选择分类</option>';
            for (var i in categorys) {
                if (categorys[i]['pid'] == pid) {
                    category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
                }
            }
            $('select[name="second_category_id"]').html(category_select_html);
            $('select[name="second_category_id"]').val(default_id);
            form.render('select');
        }
        function setSelectThird(default_id, pid) {
            pid = pid === undefined ? $('select[name="second_category_id"]').val() : pid;
            $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
            var first_category_id = $('select[name="first_category_id"]').val();
            var category_select_html = '<option value="">请选择分类</option>';
            for (var i in categorys) {
                if (categorys[i]['pid'] == pid) {
                    category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
                }
            }
            $('select[name="third_category_id"]').html(category_select_html);
            $('select[name="third_category_id"]').val(default_id);
            form.render('select');
        }

        form.on('select(first_category)', function (data) {
            setSelectSecond('', data.value);
        });
        form.on('select(second_category)', function (data) {
            setSelectThird('', data.value);
        });


    
        // likeedit.set({
        //     uploadImage: {
        //         url: "{:url('file/image')}",
        //         type: 'post'
        //     }
        // });
        // var likeedit_index = likeedit.build('content'); //建立编辑器
        form.verify({

            content: function () {
                return 
                likeedit.sync(likeedit_index)
            }
        });
        


        //------------------------数据验证----------------------------------
        function switchTab(number) {
            $('.goods-tab').removeClass('layui-this');
            $('.goods-content').removeClass('layui-show');
            $('.goods-tab').eq(number).addClass('layui-this');
            $('.goods-content').eq(number).addClass('layui-show');

        }

        form.verify({
            custom_required: function (value, item) {
                if (!value) {
                    switchTab($(item).attr('switch-tab'));
                    return $(item).attr('verify-msg');
                }
            }
            ,image:function(value, item) {
                // console.log('验证img',value,item)
                var image = $('input[name="image"]').val();
                if(!image){
                    switchTab($(item).attr('switch-tab'));
                    return $(item).attr('verify-msg');
                }
            },
            address:function(value, item) {
                // console.log('验证add',value,item)
                var address = $('input[name="address"]').val();
                if(!address){
                    switchTab($(item).attr('switch-tab'));
                    return $(item).attr('verify-msg');
                }
            }
            ,goods_image: function (value, item) {
                if (($('.goods_image').prevAll().length) == 0) {
                    switchTab($(item).attr('switch-tab'));
                    return $(item).attr('verify-msg');
                }
            },
            status:function(value,item){
                if(!$('input[name="status"]:checked').val()){
                    return $(item).attr('verify-msg');
                }
            },
            one_spec_required: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 1) {
                    if (!value) {
                        switchTab($(item).attr('switch-tab'));
                        return $(item).attr('verify-msg');
                    }
                }
            },
            add_more_spec: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if ($('#more-spec-lists-table tbody tr').length == 0) {
                        switchTab($(item).attr('switch-tab'));
                        return $(item).attr('verify-msg');
                    }
                }
            },
            more_spec_required: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (!value) {
                        switchTab($(item).attr('switch-tab'));
                        return $(item).attr('verify-msg');
                    }
                }
            },
            start_time_required: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (!value) {
                        switchTab($(item).attr('switch-tab'));
                        return $(item).attr('verify-msg');
                    }
                }
            },
            
            spec_value_str_required: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (!value) {
                        switchTab($(item).attr('switch-tab'));
                        return $(item).attr('verify-msg');
                    }
                }
            },
            end_time_required: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (!value) {
                        switchTab($(item).attr('switch-tab'));
                        return $(item).attr('verify-msg');
                    }
                }
            },
            huodong_time_required: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (!value) {
                        switchTab($(item).attr('switch-tab'));
                        return $(item).attr('verify-msg');
                    }
                }
            },
            delivery: function (value, item) {
                var choose = 0;
                $('.delivery').each(function () {
                    if ($(this).is(':checked')) {
                        choose++;
                    }
                });
                if (choose == 0) {
                    switchTab($(item).attr('switch-tab'));
                    return $(item).attr('verify-msg');
                }
            },
            one_volume: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 1) {
                    if (value && value < 0) {
                        switchTab($(item).attr('switch-tab'));
                        return '体积必须大于0';
                    }
                }
            },
            one_weight: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 1) {
                    if (value && value < 0) {
                        switchTab($(item).attr('switch-tab'));
                        return '重量必须大于0';
                    }
                }
            },
            // one_market_price: function (value, item) {
            //     if ($('input[name="spec_type"]:checked').val() == 1) {
            //         if (value && value < 0.01) {
            //             switchTab($(item).attr('switch-tab'));
            //             return '市场价必须大于或等于0.01';
            //         }
            //     }
            // },
            one_price: function (value, item) {
                // if ($('input[name="spec_type"]:checked').val() == 2) {
                //     if (value && value < 0.01) {
                //         switchTab($(item).attr('switch-tab'));
                //         return '价格必须大于或等于0.01';
                //     }
                // }
                 if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (value && value < 0) {
                        switchTab($(item).attr('switch-tab'));
                        return '价格必须大于或等于0';
                    }
                }
            },
            one_cost_price: function (value, item) {
                // if ($('input[name="spec_type"]:checked').val() == 2) {
                //     if (value && value < 0.01) {
                //         switchTab($(item).attr('switch-tab'));
                //         return '成本价格必须大于或等于0.01';
                //     }
                // }
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (value && value < 0) {
                        switchTab($(item).attr('switch-tab'));
                        return '成本价格必须大于或等于0';
                    }
                }
            },
            // more_price:function (value, item) {
            //     if ($('input[name="spec_type"]:checked').val() == 2) {
            //         if (value && value < 0.01) {
            //             switchTab($(item).attr('switch-tab'));
            //             return '价格必须大于或等于0.01';
            //         }
            //     }
            // },
            // more_cost_price:function (value, item) {
            //     if ($('input[name="spec_type"]:checked').val() == 2) {
            //         if (value && value < 0.01) {
            //             switchTab($(item).attr('switch-tab'));
            //             return '成本价格必须大于或等于0.01';
            //         }
            //     }
            // },
            // more_market_price:function (value, item) {
            //     if ($('input[name="spec_type"]:checked').val() == 2) {
            //         if (value && value < 0.01) {
            //             switchTab($(item).attr('switch-tab'));
            //             return '市场价必须大于或等于0.01';
            //         }
            //     }
            // },
            more_stock: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (value && value < 0) {
                        switchTab($(item).attr('switch-tab'));
                        return '库存必须大于0';
                    }
                }
            },
            more_weight: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (value && value < 0) {
                        switchTab($(item).attr('switch-tab'));
                        return '重量必须大于0';
                    }
                }
            },
            more_volume: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    if (value && value < 0) {
                        switchTab($(item).attr('switch-tab'));
                        return '体积必须大于0';
                    }
                }
            },
            repetition_spec_name: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    var spec_names = [];
                    $('.spec_name').each(function () {
                        spec_names.push($(this).val());
                    });
                    if ((new Set(spec_names)).size != spec_names.length) {
                        switchTab($(item).attr('switch-tab'));
                        return '规格名称重复';
                    }
                }
            },
            repetition_spec_value: function (value, item) {
                if ($('input[name="spec_type"]:checked').val() == 2) {
                    var spec_values = [];
                    $(item).find('.goods-spec-value-input').each(function () {
                        spec_values.push($(this).val());
                    });
                    console.log()
                    if ((new Set(spec_values)).size != spec_values.length) {
                        switchTab($(item).attr('switch-tab'));
                        return '同一规格中，规格值不能重复';
                    }
                }
            },
            distribution:function (value,item) {
                var first_ratio = parseFloat($('.first_ratio').val());
                var second_ratio = parseFloat($('.second_ratio').val());
                var three_ratio = parseFloat(value);
                if(first_ratio + second_ratio + three_ratio > 100){
                    return '分销比例不可超过100';
                }

            }
        });
        //------------------------数据验证----------------------------------
        
        {empty name="info"}
        // switchSpecType()
        {/empty}
        
        //------------------------编辑页面----------------------------------
        {notempty name='info'}
        var goods_info= {$info|raw|default=''};
        // console.log('goods_info',goods_info);
        $('input[name="goods_id"]').val(goods_info['base']['id']);
        // $('input[name="name"]').val(goods_info['base']['name']);
        $('input[name="code"]').val(goods_info['base']['code']);

        setSelectFirst(goods_info['base']['first_category_id']);
        setSelectSecond(goods_info['base']['second_category_id']);
        setSelectThird(goods_info['base']['third_category_id']);
        setBrand(goods_info['base']['brand_id']);    //渲染品牌
        setSupplier(goods_info['base']['supplier_id']);    //渲染品供应商
        setFreightTemplate(goods_info['base']['free_shipping_template_id']);   //渲染运费模板
        $('input[name="remark"]').val(goods_info['base']['remark']);
        //渲染活动地址
        // $('select[name="address"]').val(goods_info['base']['address']);
        
        // $('input[name="address"]').val();
        var image_html = '';
        for(var i in goods_info['base']['goods_image']) {
            var template_goods_image = $('#template-goods-image').html();
            image_html+= template_goods_image.replace('{image-src}', goods_info['base']['goods_image'][i]['uri']).replace('{image-src}',  goods_info['base']['goods_image'][i]['abs_image']);
        }
        if(image_html) {
            $('.goods-img-add').parent().find('ul').append(image_html);
        }
        //渲染活动主图
        if(goods_info['base']['image']){
            var html = '' +
                '<input name="image" type="hidden" value="' + goods_info['base']['image'] + '">' +
                '  <img class="goods-img" src="' + goods_info['base']['abs_image'] + '">\n' +
                '<a class="goods-img-del-x goods-image-del">x</a>'
            $('.master-image').html(html);
            $('.goods-image').hide();

        }
        //渲染活动视频
        if(goods_info['base']['abs_video']){
            like.videoCallback([goods_info['base']['abs_video']]);
        }
        //渲染活动主图
        if(goods_info['base']['poster']){
            var html = '' +
                '<input name="poster" type="hidden" value="' + goods_info['base']['poster'] + '">' +
                '  <img class="goods-img" src="' + goods_info['base']['abs_poster'] + '">\n' +
                '<a class="goods-img-del-x goods-image-del">x</a>'
            $('.poster-image').html(html);
            $('.poster-upload').hide();

        }
        $("input[name=status][value="+goods_info['base']['status']+"]").prop("checked",true);           //销售状态
        $("input[name=spec_type][value="+goods_info['base']['spec_type']+"]").prop('checked',"true");   //活动规格
        $('input[name="virtual_sales_sum"]').val(goods_info['base']['virtual_sales_sum']);              //虚拟销量
        $('input[name="stock_warn"]').val(goods_info['base']['stock_warn']);                            //库存预警

        $("input[name=is_show_stock][value="+goods_info['base']['is_show_stock']+"]").prop("checked",true);     //是否显示库存
        $("input[name=free_shipping_type][value="+goods_info['base']['free_shipping_type']+"]").prop("checked",true);   //快递运费类型
        $('input[name="free_shipping"]').val(goods_info['base']['free_shipping']);                                      //运费

        $("input[name=is_commission][value="+goods_info['base']['is_commission']+"]").prop("checked",true);     //分销设置
        $("input[name=is_share_bouns][value="+goods_info['base']['is_share_bouns']+"]").prop("checked",true);   //区域股东分红
        $('input[name="first_ratio"]').val(goods_info['base']['first_ratio']);                                  //一级分销
        $('input[name="second_ratio"]').val(goods_info['base']['second_ratio']);                                //二级分销
        $('input[name="three_ratio"]').val(goods_info['base']['three_ratio']);                                  //三级分销
        $('input[name="region_ratio"]').val(goods_info['base']['region_ratio']);                                //区域股东分红
        $('input[name="shareholder_ratio"]').val(goods_info['base']['shareholder_ratio']);                      //股东分红
        
        $("input[name=is_integral][value="+goods_info['base']['is_integral']+"]").prop("checked",true);   //积分抵扣
        $("input[name=is_member][value="+goods_info['base']['is_member']+"]").prop("checked",true);   //会员价是否开启
        $("input[name=give_integral_type][value="+goods_info['base']['give_integral_type']+"]").prop("checked",true);   //赠送积分类型
        if(1 === goods_info['base']['give_integral_type']){
            $("input[name=give_integral_num]").val(goods_info['base']['give_integral']);            //赠送积分
        }else if(2 === goods_info['base']['give_integral_type']){
            $("input[name=give_integral_ratio]").val(goods_info['base']['give_integral']);
        }


        //渲染活动标签
        if(1 == goods_info['base']['is_new']){
            $("input[name=is_new]").prop("checked",true);
        }
        if(1 == goods_info['base']['is_best']){
            $("input[name=is_best]").prop("checked",true);
        }
        if(1 == goods_info['base']['is_like']){
            $("input[name=is_like]").prop("checked",true);
        }
        if(1 == goods_info['base']['is_zhiku']){
            $("input[name=is_zhiku]").prop("checked",true);
        }
        form.render();
        /**
        switchSpecType(goods_info['base']['spec_type']);
        
        if(goods_info['base']['spec_type'] == 1){
            var template_goods_image = $('#template-goods-image').html();
            if(goods_info['item'][0]['image']){
                $('.goods-one-spec-img-add').parent().html('<input name="one_spec_image" type="hidden" value="' + goods_info['item'][0]['image'] + '"><a class="goods-one-spec-img-del-x">x</a><img class="goods-spec-img" src="' + goods_info['item'][0]['abs_image'] + '">');
            }
            $('input[name="one_price"]').val(goods_info['item'][0]['price']);
            $('input[name="one_cost_price"]').val(goods_info['item'][0]['cost_price']);
            $('input[name="one_market_price"]').val(goods_info['item'][0]['market_price']);
            $('input[name="one_stock"]').val(goods_info['item'][0]['stock']);
            $('input[name="one_volume"]').val(goods_info['item'][0]['volume']);
            $('input[name="one_weight"]').val(goods_info['item'][0]['weight']);
            $('input[name="one_bar_code"]').val(goods_info['item'][0]['bar_code']);
        }
        if(goods_info['base']['spec_type'] == 2) {
            for(var i in goods_info['spec']){
                addSpec(goods_info['spec'][i]['name']);
                var spes_values = goods_info['spec'][i]['values'];
                for(var j in  spes_values){
                    addSpecvalue($('.add-spec-value').eq(i),spes_values[j]['value'],spes_values[j]['id']);
                    // addSpecvalue($('.add-spec-value').eq(i),`第${i}场`,spes_values[j]['id']);
                }

            }
            for(var i in goods_info['spec']){
                $('input[name="spec_id[]"]').eq(i).val(goods_info['spec'][i]['id']);
            }
            specValueLater();
            createTableBySepc();
            for(var i in goods_info['item']){
                $('#more-spec-lists-table tbody tr').each(function() {
                    var spec_value_str = $(this).find('input[name="spec_value_str[]"]').first().val();
                    if(spec_value_str == goods_info['item'][i]['spec_value_str']){
                        spec_value_temp_ids = $(this).attr('spec-value-temp-ids');
                        spec_table_data["spec_image[]"+spec_value_temp_ids] = goods_info['item'][i]['abs_image'];
                        spec_table_data["price[]"+spec_value_temp_ids] = goods_info['item'][i]['price'];
                        spec_table_data["cost_price[]"+spec_value_temp_ids] = goods_info['item'][i]['cost_price'];
                        spec_table_data["market_price[]"+spec_value_temp_ids] = goods_info['item'][i]['market_price'];
                        spec_table_data["stock[]"+spec_value_temp_ids] = goods_info['item'][i]['stock'];
                        spec_table_data["volume[]"+spec_value_temp_ids] = goods_info['item'][i]['volume'];
                        spec_table_data["weight[]"+spec_value_temp_ids] = goods_info['item'][i]['weight'];
                        spec_table_data["bar_code[]"+spec_value_temp_ids] = goods_info['item'][i]['bar_code'];
                        spec_table_data["item_id[]"+spec_value_temp_ids] = goods_info['item'][i]['id'];
                        spec_table_data["spec_value_str[]"+spec_value_temp_ids] = goods_info['item'][i]['spec_value_str'];
                        
                        spec_table_data["start_time[]"+spec_value_temp_ids] = goods_info['item'][i]['start_time'];
                        spec_table_data["end_time[]"+spec_value_temp_ids] = goods_info['item'][i]['end_time'];
                        return false;
                    }
                });


            }
            setTableValue();
        }
        **/
        // likeedit.setContent(likeedit_index,goods_info['base']['content']);
        //设置编辑器内容
        //goods_info['base']['content']
        form.render();
        {/notempty}
            //------------------------编辑页面----------------------------------
        });
</script>


<script>


const { createEditor, createToolbar } = window.wangEditor
const E = window.wangEditor
// Extend menu
    class MyMenu {
      constructor() {
        this.title = '插入图片'
        this.iconSvg = '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>'
        this.tag = 'button'
        this.showModal = true
        this.modalWidth = 300
      }
      getValue(editor) {
        return ''
      }
      isActive(editor) {
          console.log('activate')
        return false // or true
      }
      isDisabled(editor) {
        return false // or true
      }
      exec(editor, value) {
        // do nothing 什么都不用做
      }
      getModalPositionNode(editor) {
        return null // modal 依据选区定位
      }
      getModalContentElem(editor) {
          window.myEditor  = editor
         return ''
        const $container = $('<div></div>')

        const inputId = `input-${Math.random().toString(16).slice(-8)}`
        const buttonId = `button-${Math.random().toString(16).slice(-8)}`

        const $inputContainer = $(`<label class="babel-container">
            <span>Text</span>
            <input type="text" id="${inputId}" value="hello world">
          </label>`)
        const $buttonContainer = $(`<div class="button-container">
            <button id="${buttonId}">insert text</button>
          </div>`)

        $container.append($inputContainer).append($buttonContainer)

        $container.on('click', `#${buttonId}`, e => {
          e.preventDefault()

          const text = $(`#${inputId}`).val()
          if (!text) return

          editor.restoreSelection() // 恢复选区
        //   editor.insertText(text)
        //   editor.insertText(' ')
          let uri = 'http://salon.woaiba.com/uploads/images/20240410140434a9be50727.jpg'
          const node = { type: 'image',src: uri, children: [{ text: '' }] }
            editor.insertNode(node)
        })

        setTimeout(() => {
          $(`#${inputId}`).focus()
        })

        return $container[0]

        // PS：也可以把 $container 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
      }
    }
    const myMenuConf = {
      key: 'myMenu',
      factory() {
        return new MyMenu()
      }
    }
    E.Boot.registerMenu(myMenuConf)

const editorConfig = {
    placeholder: '请创作内容',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      var textarea = document.getElementById('content');  
      
    // 设置 textarea 的内容  
    textarea.value = html;  
      
      // 也可以同步到 <textarea>
    }
}


function escape2Html(str) {
    var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
   return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
{notempty name='info'}
var goods_info= {$info|raw|default=''};
{/notempty}
window.editor = createEditor({
    selector: '#editor-container',
    {empty name="info"}
        // switchSpecType()
    {/empty}
    {notempty name='info'}
    html: escape2Html(goods_info['base']['content']),
    {/notempty}
    
    config: editorConfig,
    mode: 'default', // or 'simple'
})
console.log('工具栏配置',editor.getAllMenuKeys())
const toolbarConfig ={
        insertKeys: {
          index: 0,
          keys: ['myMenu'], // show menu in toolbar
        },
        excludeKeys:['group-image','uploadVideo']
      }

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})


</script>